<!doctype html>
<html ng-app>
<head>
    <script src="angular.js"></script>
</head>
<body>
<script>
    function Ctrl($scope) {
        $scope.val = '1';
    }
</script>
<style>
    .my-input {
        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
        background: transparent;
    }
    .my-input.ng-invalid {
        color:white;
        background: red;
    }
</style>
Update input to see transitions when valid/invalid.
Integer is a valid value.
<form name="testForm" ng-controller="Ctrl">
    <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
</form>
</body>
</html>